<template>
    <div class="SSZ">
        <header>
            <van-nav-bar
            title="我购买的"
            left-arrow
            />
           <van-tabs v-model="active">
            <van-tab title="全部" class="Sada1">
                <div class="SXHX"></div>

            </van-tab>

            <van-tab title="待付款" class="Sada1">
                <div class="SXHX"></div>
                <ul class="Sada">
                    <li>马切达工作室</li>
                    <li> > </li>
                    <li>等待买家付款</li>
                </ul>
                <ul class="Sada2">
                    <li>更多</li>
                    <li>取消订单</li>
                    <li>朋友代付</li>
                    <li>付款</li>
                </ul>
                <div class="SP1">
                    <ul>
                        <li>价格：$3600元</li>
                        <li class="SLI">咨询</li>
                        <li>立即付款</li>
                    </ul>
                </div>
            </van-tab>

            <van-tab title="待发货" class="Sma1">
                <div class="SXHX"></div>
                
                
            </van-tab>

            <van-tab title="待收货" class="Smada4">
                <div class="SXHX"></div>
                
            </van-tab>
            </van-tabs>
            
        </header>

        <section>
             
            
        </section>

        <footer>
             
        </footer>
    </div>
</template>

<script>
export default {
  data() {
    return {
      checked: '',
      active:1
    };
  },
  methods:{
      
  }

}

</script>


<style scoped>
*{
    margin: 0;
    padding: 0;
}
.SSZ{
    display: flex;
    height: 100vh;
    flex-direction: column;
    font-size: 0.12rem;
}
.van-nav-bar__text{
    color: #323233;
}
header,footer{
    height:0.8rem; 
}
section{
    flex:1;
    overflow:auto;
}
.SXHX{
    height: 1rem;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-top: 0.5rem;
}
.Sada li{
    float: left;
    width: 2rem;
    height: 0.5rem;
    font-size: 0.3rem;
    margin-left: 0.2rem;
    margin-top: 2rem;
}
.Sada1 .SP1{
    float: left;
    margin-top: 1.8rem;
    font-size: 0.4rem;
}
.Sada1 .SP1 li{
    float: left;
    margin-top: 2rem;
    font-size: 0.3rem;
}
.Sada1 .SLI{
    margin: 0 1.7rem;
}
.Sada2 li{
    float: left;
    font-size: 0.4rem;
    margin-top: 4rem;
    margin-right: 0.6rem;
}

.Smada3 li{
    float: left;
    width: 2rem;
    height: 0.5rem;
    font-size: 0.3rem;
    margin-left: 0.2rem;
    margin-top: 0.6rem;
}
.Smada4 p{
    float: right;
    margin-top: 1.8rem;
    font-size: 0.4rem;
    width: 100%;
    text-align: right;
}

.Smada5 li{
    float: left;
    font-size: 0.4rem;
    margin-top: 2.5rem;
    margin-left: 0.6rem;
}

.Sma li{
    float: left;
    width: 2rem;
    height: 0.5rem;
    font-size: 0.3rem;
    margin-left: 0.2rem;
    margin-top: 0.6rem;
}
.Sma1 p{
    float: right;
    margin-top: 1.8rem;
    font-size: 0.4rem;
    width: 100%;
    text-align: right;
}

.Sma2 li{
    float: left;
    font-size: 0.4rem;
    margin-top: 2.5rem;
    margin-left: 0.6rem;
}

.Sma3 li{
    float: left;
    width: 2rem;
    height: 0.5rem;
    font-size: 0.3rem;
    margin-left: 0.2rem;
    margin-top: 0.6rem;
}

</style>


